<template>
    <div>
        <div class="bg">
            <div class="login">
                <div class="logo">
                    <img src="../assets/images/logo-blue.png" alt="">
                    <p class="p1">Welcome To Login</p>
                    <p class="p2">欢迎登录考试系统</p>
                    <div class="user">
                        <img src="../assets/images/photo.png" alt="">
                    </div>
                    <!-- <el-button>登录</el-button> -->
                    <div class="user-login">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                            class="demo-ruleForm">
                            <el-form-item label="账号" prop="phone">
                                <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <div class="checkbox">
                                <el-checkbox v-model="ruleForm.checked">记住密码</el-checkbox>
                                <span class="forget">忘记密码?</span>
                            </div>
                            <el-form-item>
                                <el-button type="primary"
                                    style="width:240px;margin-left:-38px;margin-top:30px;background-color: #295aeb"
                                    @click="submitForm('ruleForm')">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        //手机号正则
        var phoneReg = /^1[3-9]\d{9}$/;
        var validatePhone = (rule, value, callback) => {
            if (value === '') {
                console.log("value", value);
                callback(new Error('请输入账号'));
            } else {
                if (!phoneReg.test(value)) {
                    console.log("错误");
                    callback(new Error('请输入正确的账号'));
                    // this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        return {
            ruleForm: {
                phone: '',
                password: '',
                checked: false
            },
            rules: {
                phone: [
                    { validator: validatePhone, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        async submitForm(formName) {
            //获取表单数据
            // console.log("phone", this.ruleForm.phone);
            //发送请求
            const res = await this.$api.register.doLoginApi({
                phone: this.ruleForm.phone,
                password: this.ruleForm.password
            });
            console.log("res",res);
            if (res.code) {
                //登录成功
                //1.弹窗提示  2.本地存储token  3.跳转登录页面
                this.$message.success(res.msg);
                // 保存 token 到本地存储
                localStorage.token = res.token;
                
                this.$router.push("/home/index");
            } else {
                //请求失败
            }

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    height: 610px;
    background-image: url(../assets/images/bg.png);
    background-repeat: no-repeat;
    background-size: 1266px 610px;

    .login {
        width: 400px;
        height: 100%;
        background-color: #ffffff;
        box-shadow: 5px 9px 30px 0px rgba(83, 122, 237, 0.52);

        .logo {
            width: 300px;
            height: 50px;
            margin-left: 50px;

            img {
                width: 80%;
                height: 80%;
                margin-top: 50px;
            }

            .p1 {
                width: 270px;
                font-size: 30px;
                color: #3d3d3d;
                line-height: 36px;
                font-family: SourceHanSansCN-Bold;
                margin: 10px;
            }

            .p2 {
                width: 270px;
                color: #3d3d3d;
                margin: 10px;
            }

            .user {
                width: 70px;
                height: 70px;
                margin: auto;

                img {
                    width: 60px;
                    height: 60px;
                    margin-top: 20px;
                }
            }

            .user-login {
                width: 300px;
                margin-top: 20px;
                margin-left: -58px;

                .checkbox {
                    margin-left: 60px;

                    .forget {
                        margin-left: 90px;
                        font-size: 14px;
                        color: #2a5beb;
                    }
                }
            }
        }

    }

}
</style>